<template>
	<view>
		<u-popup :show="popup_show" mode="center" :safeAreaInsetBottom="false" :mask-close-able="false" round="15" >
			<view class="popup">
				<view class="popup-wrap">
					<status-bar></status-bar>
					<text class="title">温馨提示</text>
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="html-view">
							<u-parse :content="formatRichText(content)"></u-parse>
						</view>
						
						<view class="btn-view">
							<text class="btn-text center btn-text-confirm" @tap="confirm">确认</text>
						</view>
					</scroll-view>
					

				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {

		data() {
			return {
				popup_show: false,
				content: "",
			};
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				this.api.post('/api/work/getNotice').then(async (res) => {
					this.content = res.notice
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			show() {
				this.popup_show = true
			},
			confirm() {
				this.popup_show = false
				this.$emit('confirm')
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100vw;
		height: 100vh;
	}

	.popup-wrap {
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 0 30rpx;

		.title {
			padding: 32rpx 0;
			text-align: center;
			color: #333333;
			font-size: 32rpx;
		}

		.scroll-view {
			min-height: 40vh;
			max-height: 90vh;
		}

		.html-view {
			padding: 0rpx 10rpx;
			color: #333333;
			font-size: 26rpx;
			line-height: 46rpx;

			p {
				font-size: 26rpx;
			}
		}

		.btn-view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 50rpx 0 30rpx;

			.btn-text {
				color: #55C29A;
				font-size: 28rpx;
				height: 76rpx;
				line-height: 76rpx;
				width: 100%;
				border-radius: 100px;
				border: 1px solid #55C29A;
			}

			.btn-text-confirm {
				color: #ffffff;
				border: 1px solid #55C29A;
				background-color: #55C29A;
			}

		}
	}
</style>